<template>
  <div class="container_mine__header2">
    <van-popover
      v-model:show="showPopover"
      :actions="actions"
      @select="onSelect"
      :overlay="true"
      class="van-popover22"
      :offset="[-50, -60]"
      :show-arrow="false"
    >
      <template #reference>
        <van-badge :content="5" class="van-badge22">
          <div class="container_mine__header2__notice iconfont">&#xe709;</div>
        </van-badge>
      </template>
    </van-popover>
    <img
      src="../../../image/aaa.png"
      class="container_mine__header2__img"
      alt=""
    />
  </div>
</template>
<script setup>
import { ref } from "vue";
import { showToast } from "vant";
const showPopover = ref(false);

// 通过 actions 属性来定义菜单选项
const actions = [
  { text: "患者消息", icon: "add-o" },
  { text: "同事消息", icon: "music-o" },
  { text: "系统消息", icon: "music-o" },
  { text: "更多", icon: "more-o" },
];
const onSelect = (action) => showToast("暂无通知消息");
</script>
<style lang="scss" scoped>
@import "../../../style/theme.scss";
.container_mine__header2 {
  width: 414rem;
  height: 135rem;
  background-color: $theme1-color;
  box-sizing: border-box;
  padding-top: 44rem;
  display: flex;
  justify-content: end;
  color: #fff;
  font-size: 20rem;
  overflow: hidden;
  &__img {
    width: 350rem;
    height: 200rem;
    position: absolute;
    left: 0;
    top: -20rem;
  }
  .van-badge22 {
    margin-right: 20rem;
  }
  .van-popover__wrapper {
    height: 10rem;
  }
}
</style>
